<template>
  <view class="SortItem class" @click="clickHandler">
    <text class="Label">{{ label }}</text>
    <view>
      <FontIcon
        char="e67c"
        :class="{
          Icon: true,
          Up: true,
          IconSelected: sortType === enumSortType.ASC,
        }"
        size="12"
      />
      <FontIcon
        char="e67c"
        :class="{
          Icon: true,
          Down: true,
          IconSelected: sortType === enumSortType.DESC,
        }"
        size="12"
      />
    </view>
  </view>
</template>
<script lang="ts">
import FontIcon from '@/components/FontIcon.vue';
import Vue from '@/utils/Vue';

interface IData {
  sortType: SortType;
  enumSortType: typeof SortType;
}

export enum SortType {
  NONE = 0,
  ASC = 1,
  DESC = 2,
}

const SORT_LIST = [SortType.NONE, SortType.ASC, SortType.DESC];

export default Vue.extend({
  data(): IData {
    return {
      sortType: SortType.NONE,
      enumSortType: SortType,
    };
  },
  components: { FontIcon },
  props: {
    label: String,
  },
  methods: {
    clickHandler() {
      const index = SORT_LIST.indexOf(this.sortType) || 0;
      const nextIndex = (index + 1) % SORT_LIST.length;
      this.sortType = SORT_LIST[nextIndex];
    },
  },
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.SortItem {
  display: flex;
  align-items: center;
  color: #8b8b8b;
  .Label {
    margin-right: 5px;
  }
  .Icon {
    line-height: 0.8;
    font-size: 12px;
    &.IconSelected {
      color: #ba0001;
    }
  }
  .Down {
    transform: rotate(180deg);
  }
}
</style>
